<template>
    <div class="footer-panel">
        <!-- <div class="item-list">
      <span>会员服务</span>
      <span style="margin:0 40px">|</span>
      <span>加盟政策</span>
      <span style="margin:0 40px">|</span>
      <span>诚聘英才</span>
      <span style="margin:0 40px">|</span>
      <span>法律申明</span>
    </div> -->
        <div class="connect-box">
            <div class="connect-item">

                <div class="connect-item-content" style="width:270px">
                    <!-- <i class="el-icon-phone-outline" style="font-size:20px;position:relative;left:-10px;top:5px margin-right:50px" /> -->
                    <span style="font-size:16px;">客服电话</span>
                    <span style="font-size:24px;margin-top:10px">400-8030511</span>
                    <span style="font-size:14px;color:rgba(154,175,205,1);margin-top:4px">工作时间：9：00-17：30（工作日）</span>
                </div>
                <!-- <div style="margin:20px 5% 20px 1%;width:1px;height:65px;background-color:white;" /> -->

                <div class="connect-item-content">
                    <!-- <i class="el-icon-location-outline" style="font-size:20px;position:relative;left:-10px;top:5px" /> -->
                    <span style="font-size:16px;">公司地址</span>
                    <span style="font-size:14px;margin-top:10px">浙江省杭州市余杭区赛银国际广场</span>
                </div>
            </div>
        </div>
        <div class="bottom-text">Copyright <span>&#174;</span> 2017 杭州宸晖网络科技有限公司 版权所有 浙ICP备18025176号</div>
        <!-- <div class="logo-image" /> -->
        <!-- <div class="QR-image">
      <div class="QR-image-content" />
      <div class="QR-text"><i class="iconfont icon-wechat" />关注微信公众号了解更多</div>
    </div> -->
    </div>
</template>

<script>
export default {
    name: 'Footer'
}
</script>

<style scoped>
.bottom-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    text-align: center;
    align-items: center;
    font-size: 14px;
    color: rgba(154, 175, 205, 1);
}
.connect-item-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 360px;
    color: rgba(255, 255, 255, 1);
}
.connect-item {
    margin-top: -80px;
    width: 1180px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: rgba(255, 255, 255, 1);
}
.connect-box {
    position: absolute;
    top: 60%;
    left: 48%;
    transform: translate(-50%, -50%);
    display: inline;
    text-align: center;
    align-items: center;
}
.item-list {
    position: absolute;
    top: 20px;
    left: 45%;
    transform: translate(-50%, -50%);
    display: inline;
    text-align: center;
    align-items: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}
.QR-text {
    height: 17px;
    margin-top: 13px;
    font-size: 12px;
    color: rgba(154, 175, 205, 1);
    display: block;
    word-break: keep-all;
    white-space: nowrap;
}
.QR-image-content {
    width: 160px;
    height: 160px;
    background-color: grey;
    background-image: url(../assets/qr2.png);
    background-size: cover;
}
.QR-image {
    width: 160px;
    height: 190px;
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translate(50%, -50%);
}
.logo-image {
    width: 131px;
    height: 43px;
    position: absolute;
    background-image: url(../assets/logo-II.png);
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.footer-panel {
    height: 275px;
    width: 100%;
    position: relative;
    background: #252533;
}
</style>
